$(function () {
    /**
         * 
        页面功能分析:
      0 建议所有的变量都放在代码的最前面 function的前面 
      1 下拉刷新  复杂数据的渲染建议使用模版引擎 
        a 页面初始化 
          1 先构造请求参数 
            a 根据url上的参数 key->proName 产品名称
            b 去查看api文档
        b 点击搜索按钮
          1 获取商品名称
          2 把名称赋值给 全局查询参数对象 QueryObj.proName
          3 手动触发 下拉刷新 
            因为下拉刷新组件里面 已经包含了请求数据的代码 
        c 点击排序的按钮
          1 切换 箭头方向
          2 需要知道点击的是谁 是价格还是数量
          3 根据箭头的方向来判断 是升序还是降序 
          4 手动触发 下拉刷新 
      2 上拉加载下一页
        1 计算总页数 TotalPage
          a 查看返回值 
            count 总条数 pageSize 页容量 
                              6/4=1.5
                     count=6    pageSize   =3   
            总页数 =Math.ceil(count/pageSize)
            TotalPage=Math.ceil(count/pageSize);
        2 拿当前页 QueryObj.page和TotalPage
          a 如果超过了 返回 不执行
          b 不超过-> QueryObj.page++ 然后再发送请求 
      3 点击商品页面跳转
        1 最简单 点击a标签 href属性写上 路径就可以了
        2 在mui中 上拉刷新和下拉加载组件中   a标签的跳转被禁止
        3 因为我们只是在做移动web 不是app 所以还是需要a标签的跳转功能
        4 给a标签绑定一个tap事件
            location.href=a.href;
         */
    
    /* 定义参数 */
    var QueryObj = {
        /* 产品名称 */
        proName: $.getQueryString("key"),
        /* 品牌 */
        brandId: "",
        /* 价格排序  1=>升序  2=>降序 */
        price: "",
        /* 数量排序 */
        num: "",
        /* 开始页数 */
        page: 1,
        /* 页容量 */
        pageSize: 4
    }

    /* 总页数 */
    var TotalPage = 1;

    /* 初始化下拉刷新 */
    init();

    function init() {
        mui.init({
            pullRefresh: {
                container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
                down: {
                    height: 50, //可选,默认50.触发下拉刷新拖动距离,
                    auto: true, //可选,默认false.首次加载自动下拉刷新一次
                    contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                    contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                    contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                    callback: function () {
                        // 必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                        /* 在触发下拉的时候，把page重新设置为1 */
                        QueryObj.page = 1;
                        
                        /* 发送请求 */
                        queryProduct(function (result) {
                            /* 渲染模板 */
                            var html = template("goodsTpl", result);
                            /* 添加数据 */
                            $(".lt-goods-ul").html(html);
                            /* 结束下拉刷新 */
                            mui('#refreshContainer').pullRefresh().endPulldownToRefresh();

                            /* 重置上拉控件的提示 */
                            mui('#refreshContainer').pullRefresh().refresh(true);
                        });
                        
                    }
                },
                up: {
                    height: 50, //可选.默认50.触发上拉加载拖动距离
                    auto: true, //可选,默认false.自动上拉加载一次
                    contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
                    contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
                    callback: function () {
                        /* 必选， 刷新函数， 根据具体业务来编写， 比如通过ajax从服务器获取新数据； */
                        /* 执行加载下一页 */
                        /* 判断当前页有没有超过总页数 */
                        if (QueryObj.page >= TotalPage) {
                            /* 不再请求新的数据；给出用户提示信息 */
                            /* 是否还有更多数据：若还有更多数据，则传入false；否则传入true，之后滚动条滚动到底是，将不再显示“上拉显示更多”的提示语，而显示“没有更多数据了”的提示语 */
                            mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
                            return;
                        } else {
                            /* 继续请求新的数据 */
                            QueryObj.page++;
                            queryProduct(function (result) {
                                /* 渲染数据，追加到数据的下面 */
                                var html = template("goodsTpl", result);
                                $(".lt-goods-ul").append(html);
                                // 结束上拉
                                mui('#refreshContainer').pullRefresh().endPullupToRefresh();
                            });
                        }
                    }
                }
            }
        });


        /* 绑定搜索按钮 */
        $(".serBtn").on("tap", function () {
            var key = $(".serText").val();
            QueryObj.proName = key;

            /* 手动触发下拉刷新 */
            mui("#refreshContainer").pullRefresh().pulldownLoading();
        });

        /* 点击排序按钮 */
        $(".ser-filter > a").on("tap", function (e) {
            // console.log(e);
            var aDom = e.target.nodeName == "A" ? e.target : e.target.parentNode;
            // console.log(aDom);
            /* 获取需要排序的字段 */
            var sortName = aDom.dataset.sortname;
            /* 切换箭头方向 */
            /* find === 从父元素里面找到里面的子元素 */
            /* toggleClass === 有的话就移除，没有的就添加 */
            $(aDom).find(".fa").toggleClass("fa-angle-down fa-angle-up");
            /* 升序还是降序，添加标识 */
            var sort = 1;
            /* 判断升序还是降序 */
            if ($(aDom).find(".fa").hasClass("fa-angle-down")) {
                /* 降序 */
                sort = 2;
            } else {
                /* 升序 */
                sort = 1;
            }

            QueryObj.num = "";
            QueryObj.price = "";
            QueryObj[sortName] = sort;
            /* 手动触发下拉刷新 */
            mui("#refreshContainer").pullRefresh().pulldownLoading();
        });

    }

    /* 点击购买按钮跳转到购买页面 */
    $("#lt-goods-ul").on("tap", ".pro-buy", function (e) {
        var pkey = e.target.parentNode.dataset.id;
        location.href = "./product.html?id=" + pkey;
    });

    /* 请求产品数据函数 */
    function queryProduct(callback) {
        $.get("/product/queryProduct", QueryObj, function (result) {
            callback && callback(result);

            /* 计算总页数 */
            TotalPage = Math.ceil(result.count / QueryObj.pageSize);
        });
    }

});
